<template>
	<div class="echart" :id="id" :style="{ width: width + 'px', height: '240px' }"></div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		props: {
			id: String,
			width: Number
		},
		methods: {
			initChart(name, yData) {
				let getchart = echarts.init(document.getElementById(this.id));
				var option = {
					tooltip: {
						trigger: 'item',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0,0,0,0.69)',
						borderColor: 'rgba(0,0,0,0.69)',
						textStyle: {
							color: '#fff'
						},
						formatter: function(params) {
							let html = ''
							let arr = params.data.data
							for (let i = 0; i < arr.length; i++) {
								html = html + '<br><span style="color:#FEE287;padding-left:10px;">' + arr[i]
									.ActivityTypeName + '</span>' + '：' + (arr[i].MemberNum || arr[i].ActivityNum ||0)
							}
							return '<span style="color:#FEE287">' + params.data.name + '</span>' + '：' + params
								.data.value + html
						}
					},
					color: [{
						type: 'linear',
						x: 0,
						y: 1,
						x2: 1,
						y2: 0,
						colorStops: [{
							offset: 1,
							color: 'rgba(255,210,146,70%)' // 0% 处的颜色
						}, {
							offset: 0,
							color: 'rgba(255,80,40,70%)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}, {
						type: 'linear',
						x: 0,
						y: 1,
						x2: 1,
						y2: 0,
						colorStops: [{
							offset: 0,
							color: 'rgba(0,199,249,70%)' // 0% 处的颜色
						}, {
							offset: 1,
							color: 'rgba(89,255,241,70%)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					},'rgba(2,167,209,70%)',
					{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 1,
						y2: 1,
						colorStops: [{
							offset: 1,
							color: 'rgba(12,115,255,70%)' // 0% 处的颜色
						}, {
							offset: 0,
							color: 'rgba(0,228,255,70%)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}],
					legend: {
						show: false
					},
					series: [{
						name: '',
						type: 'pie',
						radius: [0, 60],
						center: ['50%', '50%'],
						roseType: 'radius',
						itemStyle: {
							borderRadius: 0
						},
						label: {
							show: true,
							borderWidth: 0,
							color: '#fff',
							fontSize: 12,
							position: 'outside',
							width: 200,
							overflow: 'none'
						},
						labelLine: {
							length: 3,
							length2: 0
						},
						data: yData
					}]
				};
				getchart.setOption(option);
				//随着屏幕大小调节图表
				window.addEventListener('resize', () => {
					getchart.resize();
				});
			}
		}
	};
</script>
